<template>
  <div class="buttom-box">
    <div class="bottom1">
      <div
        class="button button1"
        @mouseover="changeColor(1)"
        @mouseout="restoreColor(1)"
        @click="sendDataToParent1"
        :style="{ cursor: cursorStyle1 }"
      >
        <div class="textbu" :style="{ color: textColor1 }">返回</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      cursorStyle1: "default",
      textColor1: "white",
    };
  },
  emits: ["sendData"],
  mounted() {},
  methods: {
    sendDataToParent1() {
      this.$emit("sendData", "返回"); // 触发自定义事件并传递数据
    },
    changeColor(number) {
      if (number === 1) {
        this.textColor1 = "aqua";
        this.cursorStyle1 = "pointer";
      }
    },
    restoreColor(number) {
      if (number === 1) {
        this.textColor1 = "aliceblue"; // 还原为原来的颜色
      }
    },
  },
};
</script>
<style scoped>
.buttom-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 7rem;
}
.bottom1 {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.button1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 18.4rem;
  height: 2.8rem;
  background-image: url("../assets/返回.png");
  /* background-size: 100% 100%; */
  background-size: cover;
  background-repeat: no-repeat;
}
</style>